/**
 * @authors tanqichao
 * @date    2017-06-20 13:59:27
 * @module  高级设置 - 投放人群
 */

import { Radio, Modal, Button, Tabs, Tree, Input } from 'antd';
import React, { Component, PropTypes } from 'react';
import './Crowd.less';

const RadioGroup = Radio.Group;
const TreeNode = Tree.TreeNode;
const TabPane = Tabs.TabPane;

class Crowd extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: 1,
      visible: false,
      intrinsic: [],
      interest: [],
      sex: []
    }
  }

  // 兴趣属性
  renderInterestProperty = () => {
    const { crowdList, crowdCodes } = this.props
    const interestProperty = crowdList[0].value

    const handleCheck = (checkedKeys) => {
      this.setState({
        interest: checkedKeys
      })
    }

		const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.code} title={item.name}>{loop(item.children)}</TreeNode>
      }
      return <TreeNode key={item.code} title={item.name} />
		})

		return (
			<Tree
	    	checkable
        onCheck={handleCheck}
        defaultCheckedKeys={crowdCodes.join(',').split(',')}
	    >
				{loop(interestProperty)}
			</Tree>
		)
  }

  // 固有属性
  renderIntrinsicPropert = () => {
    const { crowdList, crowdCodes } = this.props
    const interinsicPropert = crowdList[1].value

    const handleCheck = (checkedKeys) => {
      console.log(checkedKeys)
      this.setState({
        intrinsic: checkedKeys
      })
    }

		const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.code} title={item.name}>{loop(item.children)}</TreeNode>
      }
      return <TreeNode key={item.code} title={item.name} />
		})

		return (
			<Tree
	    	checkable
        onCheck={handleCheck}
        defaultCheckedKeys={crowdCodes.join(',').split(',')}
	    >
				{loop(interinsicPropert)}
			</Tree>
		)
  }

  // 性别属性
  renderSex = () => {
    const { crowdList, crowdCodes } = this.props
    const sex = crowdList[2].value

    const handleCheck = (checkedKeys) => {
      this.setState({
        sex: checkedKeys
      })
    }

		const loop = data => data.map((item) => {
      return <TreeNode key={item.code} title={item.name} />
		})

		return (
			<Tree
	    	checkable
        onCheck={handleCheck}
        defaultCheckedKeys={crowdCodes.join(',').split(',')}
	    >
				{loop(sex)}
			</Tree>
		)
  }

  showCrowd = () => {
    const { onComplete } = this.props

    const hide = () => {
      this.setState({visible: false})
    }

    const handleOk = () => {
      const oldData = [].concat(this.props.crowdCodes)
      const sex = this.state.sex
      const interest = this.state.interest
      const intrinsic = this.state.intrinsic
      const tempArr = [].concat(sex, intrinsic, interest)
      tempArr.map((item) => {
        oldData.map((list, index) => {
          if (item == list) {
            oldData.splice(index, 1)
          }
        })
      })


      onComplete(oldData.concat(tempArr))
      this.setState({visible: false})
    }

    return (
      <Modal
        width={700}
        title="投放人群"
        wrapClassName="crowd"
        onCancel={hide}
        onOk={handleOk}
        maskClosable={false}
        visible={this.state.visible}
      >
        <div className="crowdWrap">
          <Tabs defaultActiveKey="1">
            <TabPane tab="兴趣属性" key="1">
              {this.renderInterestProperty()}
            </TabPane>
            <TabPane tab="固有属性" key="2">
              {this.renderIntrinsicPropert()}
            </TabPane>
            <TabPane tab="性别" key="3">
              {this.renderSex()}
            </TabPane>
          </Tabs>
        </div>
      </Modal>
    )
  }

  render() {
    const { crowdList, crowdCodes } = this.props

    const update = () => {
      this.setState({visible: true})
    }

    const handleChange = (e) => {
      const checked = e.target.value
      if (e.target.value === 1) {
        this.props.onComplete([])
      }
      this.setState({
        visible: checked === 2 ? true : false
      })
    }

    return (
      <span>
        <RadioGroup
          onChange={handleChange}
          value={crowdCodes && !!crowdCodes.length ? 2 : 1}
        >
          <Radio value={1}>不限</Radio>
          <Radio value={2}>选择人群</Radio>
        </RadioGroup>
        {(crowdCodes && !!crowdCodes.length) ? <a onClick={update}>更改</a> : null}
        {crowdList && !!crowdList.length && this.showCrowd()}
      </span>
    )
  }
};

export default Crowd;
